<template>
  <div class="kuwei">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="line-height: 36px;">库位管理</span>
        <el-button style="float: right;" type="primary" @click="dialogOpen('add')" v-if="USER.auth.indexOf('base_kuwei_add')!==-1">新增库位</el-button>
      </div>
      <s-table
        :table="table" ref="table" @http="tableWatch">
        <el-row>
          <!--xs:24-->
          <el-col :xs="24" :lg="{span: 4, offset: 0}">
            <el-form-item label="库区名称" prop="kqmc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_kqmc"
                        placeholder="库区名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}"

          >
            <el-form-item label="库位类型" prop="lx">
              <el-select v-model="autoVue_table_lx"
                         placeholder="库位类型">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  v-for="item in KUWEI.lx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span:4, offset: 1}">
            <el-form-item label="库位名称" prop="mc">
              <el-input type="text"
                        class="input"
                        v-model="autoVue_table_mc"
                        placeholder="库位名称" spellcheck="false" auto-capitalize="off" auto-complete="off"
                        auto-correct="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="占用状态" prop="zyzt">
              <el-select v-model="autoVue_table_zyzt"
                         placeholder="占用状态">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  v-for="item in KUWEI.zyzt"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 4, offset: 1}">
            <el-form-item label="库位属性" prop="sx">
              <el-select v-model="autoVue_table_sx"
                         placeholder="库位属性">
                <el-option
                  label="全部"
                  value=""></el-option>
                <el-option
                  v-for="item in KUWEI.sx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table-column
          fixed="right"
          align="center"
          slot="operation"
          class-name="operationMore"
          label="可用操作"
          width="160">
          <template slot-scope="s">
            <el-button type="info" size="mini" @click="tablePrint(s.row)" v-if="USER.auth.indexOf('base_kuwei_print')!==-1 && s.row.show_sshzid !==''">打印</el-button>
            <el-button type="success" size="mini" @click="tableEdit(s.row)" v-if="USER.auth.indexOf('base_kuwei_edit')!==-1 && s.row.show_sshzid !==''">编辑</el-button>
            <el-button type="danger" size="mini" @click="tableDelete(s.row)" v-if="USER.auth.indexOf('base_kuwei_delete')!==-1 && s.row.show_sshzid !==''">删除</el-button>
          </template>
        </el-table-column>
      </s-table>
    </el-card>
    <!--修改库位-->
    <s-dialog :dialog="dialog" :close="dialogInit">
      <p slot="title">{{dialog.title}}库位</p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="mc" label="库位名称">
              <el-input
                type="text"
                ref="kumc"
                @keyup.enter.native="getkuweiFocus(1)"
                :disabled="dialog.title == '修改'"
                v-model="formDialog.mc"
                placeholder="库位名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="sskqid" label="库区名称">
              <el-select
                @visible-change="getkwFocus1"
                v-model="formDialog.sskqid"
                filterable
                remote
                placeholder="请输入库区名称"
                :remote-method="dialogRemoteKqmc">
                <el-option
                  v-for="item in dialog.sskqid"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="cszl" label="可承受重量">
              <el-input
                ref="wright"
                type="text"
                @keyup.enter.native="getkuweiFocus(3)"
                v-model.number="formDialog.cszl"
                placeholder="可承受重量"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="rntj" label="可容纳体积">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(4)"
                v-model.number="formDialog.rntj"
                placeholder="可容纳体积"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="tps" label="库位托盘数">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(5)"
                v-model.number="formDialog.tps"
                placeholder="库位托盘数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="cs" label="库位层数">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(6)"
                v-model="formDialog.cs"
                placeholder="库位层数"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="xlsx" label="拣货顺序">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(7)"
                v-model.number="formDialog.xlsx"
                placeholder="拣货顺序"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="sx" label="库位属性">
              <el-select
                @visible-change="getkwFocus2"
                v-model="formDialog.sx"
                placeholder="请选择">
                <el-option
                  v-for="item in KUWEI.sx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="lx" label="库位类型">
              <el-select
                @visible-change="getkwFocus3"
                ref="kuweilx"
                v-model="formDialog.lx"
                placeholder="请选择"
                :disabled="dialog.title == '修改'">
                <el-option
                  v-for="item in KUWEI.lx"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="bz" label="备注">
              <el-input
                ref="remark"
                type="text"
                @keyup.enter.native="getkuweiFocus(11)"
                v-model="formDialog.bz"
                placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="hphf" label="是否可以货品混放">
              <div class="s-content">
                <el-switch
                  :disabled="formDialog.lx === '4' || formDialog.lx === '5'"
                  v-model="formDialog.hphf"
                  on-color="#13ce66"
                  on-text="允许"
                  off-text="不许"
                  off-color="#ff4949"
                  on-value="1"
                  off-value="0">
                </el-switch>
              </div>
            </el-form-item>
          </el-col>
          <!--
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="hphf" label="是否可以货品混放">
              <el-select v-model="formDialog.hphf" placeholder="请选择" :disabled="formDialog.lx === '4' || formDialog.lx === '5'">
                <el-option
                  v-for="item in KUWEI.hphf"
                       :label="item.value"
                  :key="item.dictionaryid"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          -->
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="kwgd" label="库位高度">
              <el-input
                type="text"
                @keyup.enter.native="getkuweiFocus(12)"
                v-model.number="formDialog.kwgd"
                placeholder="库位高度"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="kyxs" label="库位可用系数(0-1)">
              <el-input
                :min="1"
                type="text"
                v-model.number="formDialog.kyxs"
                placeholder="库位可用系数">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="pchf" label="同货品批次是否可以混放" v-if= "formDialog.hphf == 0">
              <div class="s-content">
                <el-switch
                  :disabled="formDialog.lx === '4' || formDialog.lx === '5'"
                  v-model="formDialog.pchf"
                  on-color="#13ce66"
                  on-text="允许"
                  off-text="不许"
                  off-color="#ff4949"
                  on-value="1"
                  off-value="0">
                </el-switch>
              </div>
            </el-form-item>
          </el-col>
          <!--
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="pchf" label="同货品批次是否可以混放" v-if= "formDialog.hphf == 0">
              <el-select v-model="formDialog.pchf" placeholder="请选择" :disabled="formDialog.lx === '4' || formDialog.lx === '5'">
                <el-option
                  v-for="item in KUWEI.pchf"
                  :key="item.dictionaryid"
                  :label="item.value"
                  :value="item.dictionaryid">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          -->
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>
<script>
  import { AutoVue, AutoPromise, GetLodop } from '~/plugins/Tools';

  function __form () {
    return {
      bz: {value: '', cRemarks: ''},
      sskqid: {value: '', rule: ['vNull__change'], cRemarks: ''},
      kyxs: {value: '', rule: ['vNull', 'vNumber'], cRemarks: ''},
      kqmc: {value: '', rule: ['vNull__change'], cRemarks: ''},
      mc: {value: '', rule: ['vNull'], cRemarks: ''},
      sx: {value: '0', rule: ['vNull'], cRemarks: '0正常 1封存 2管控 3禁入'},
      lx:
        {
          value: '0',
          rule: ['vNull'],
          cRemarks: '0 存储库位 1件拣货库位 2箱拣货库位 3箱/件拣货库位 4待检库位 5理货库位 6组装工作库位',
        },
      hphf: {value: '0', rule: ['vNull'], cRemarks: '0不可 1允许'},
      pchf: {value: '0', rule: ['vNull'], cRemarks: '0不可 1允许'},
      cs: {value: '1', rule: ['vNull', 'vNumber', 'vNumberZ', 'vNumberZZ'], cRemarks: ''},
      tps: {value: '1', rule: ['vNull', 'vNumber', 'vNumberZ', 'vNumberZZ'], cRemarks: ''},
      xlsx:
        {
          value: '0',
          rule: ['vNull', 'vNumber', 'vNumberZ', 'vNumberZZ'],
          cRemarks: '',
        },
      cszl: {value: '0', rule: ['vNull', 'vNumber', 'vNumberZ'], cRemarks: ''},
      kwgd: {value: '0', rule: ['vNull', 'vNumber', 'vNumberZ'], cRemarks: ''},
      rntj: {value: '0', rule: ['vNull', 'vNumber', 'vNumberZ'], cRemarks: ''},
    };
  }

  export default AutoVue({
    name: 'base_kuwei-FEcarWms',
    head: {
      'title': '库位管理',
      'meta': [
        { 'hid': 'description', 'name': 'description', 'content': '乐速科技平台 库位 查看库位信息' },
      ],
    },
    store: ['DICTIONARY_kuwei', 'KUWEI', 'USER'],
    data: {
      table: {
        column: [
          {
            label: '仓库名称',
            prop: 'ckmc',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '货主名称',
            prop: 'show_sshzid',
            minWidth: '150px',
            cRemarks: '',
            search: false,
          },
          {
            label: '库区名称',
            prop: 'kqmc',
            minWidth: '100px',
            cRemarks: '',
            search: true,
          },
          {
            label: '库位名称',
            prop: 'mc',
            minWidth: '200px',
            cRemarks: '',
            search: true,
          },
          {
            label: '库位属性',
            prop: 'show_sx',
            minWidth: '0px',
            cRemarks: '0正常 1封存 2管控 3禁入',
            search: true,
          },
          {
            label: '库位类型',
            prop: 'show_lx',
            minWidth: '0px',
            cRemarks: '0 存储库位 1件拣货库位 2箱拣货库位 3箱/件拣货库位 4待检库位 5理货库位 6组装工作库位',
            search: true,
          },
          {
            label: '货品混放',
            prop: 'hphf',
            minWidth: '0px',
            cRemarks: '0可以货品混放 1可以货品混放',
            search: false,
            formatter: (row, column) => {
              return row[column.property || column] === 0 ? '不允许' : '允许';
            },
            elTag: {
              filterType: function (value) {
                return value === 1 ? 'success' : 'danger';
              },
            },
          },
          {
            label: '同批混放',
            prop: 'pchf',
            minWidth: '0px',
            cRemarks: '0同货品批次不可以混放 1同货品批次不可以混放',
            search: false,
            formatter: (row, column) => {
              return row[column.property || column] === 0 ? '不允许' : '允许';
            },
            elTag: {
              filterType: function (value) {
                return value === 1 ? 'success' : 'danger';
              },
            },
          },
          {
            label: '托盘数',
            prop: 'tps',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '库位高度',
            prop: 'kwgd',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '占用状态',
            prop: 'show_zyzt',
            minWidth: '0px',
            cRemarks: '',
            search: true,
          },
          {
            label: '库位层数',
            prop: 'cs',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '库位可用系数',
            prop: 'kyxs',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '线路顺序',
            prop: 'xlsx',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '承受重量',
            prop: 'cszl',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
          {
            label: '容纳体积',
            prop: 'rntj',
            minWidth: '0px',
            cRemarks: '',
            search: false,
          },
        ],
        url: '/wmslibraryposition/list',
        key: 'id',
        tableColumn: 12,
        // Popover 弹出框
        popover: {
          width: 900,
        },
      },
      formDialog: __form(),
      dialog: {
        title: '新增',
        row: {},
        sskqid: [],
      },
      zidian: 1,
    },
    transition: 'slide-fade',
    methods: {
      getkuweiFocus (len) {
        let path = event.path;
        for (let i = 0, type = true; (i < path.length) && (type = true); i++) {
          let classname = path[i].className;
          if (classname !== '' && classname !== undefined) {
            if (classname.indexOf('el-form ') !== -1 || classname === 'el-form') {
              const DOM = path[i][len];
              DOM.focus();
              type = false;
            }
          }
        }
      },
      getkwFocus1 (data) {
        if (data === false) {
          this.$refs.wright.$el.children[0].focus();
        }
      },
      getkwFocus2 (data) {
        if (data === false) {
          this.$refs.kuweilx.$el.children[0].focus();
        }
      },
      getkwFocus3 (data) {
        if (data === false) {
          this.$refs.remark.$el.children[0].focus();
        }
      },
      tablePrint (row) {
        console.log('1');
        this.$confirm('您将打印库位信息。', '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(() => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印库位信息');
          LODOP.ADD_PRINT_BARCODE(40, 30, 220, 78, '128B', row.mc);
          LODOP.PREVIEW();
        });
      },
      tableMultiPrint () {
        this.$confirm(`您将打印 ${this.table.multipleSelection.length} 个库位信息。`, '确认打印？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(() => {
          let LODOP = GetLodop();
          LODOP.PRINT_INIT('打印库位信息');
          for (let item of this.table.multipleSelection) {
            LODOP.NewPage();
            LODOP.ADD_PRINT_BARCODE(40, 30, 220, 78, '128B', item.mc);
          }
          LODOP.PREVIEW();
        });
      },
      tableDelete (row) {
        this.$confirm('您将删除库位信息。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmslibraryposition/delete/', {
                ids: ids.length === 0 ? [row.id] : ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableMultiDelete () {
        let ids = [];
        this.table.multipleSelection.forEach(item => {
          ids.push(item.id);
        });
        this.$confirm('您将删除这些库位信息。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        })
          .then(async _ => {
            let ids = [];
            for (let item of this.table.multipleSelection) {
              ids.push(item.id);
            }
            try {
              await this.post('/wmslibraryposition/delete/', {
                ids,
              });
              this.tableWatch('table');
            } catch (err) {
              console.log(err);
            }
          })
          .catch(_ => {
          });
      },
      tableEdit (row) {
        this.dialogOpen('PUT', row);
        console.log('row:' + row);
      },
      dialogInit () {
        this.dialog.row = {};
        this.dialog.sskqid = [];
        this.formDialog = {
          ...this.formDialog,
          ...this.ObjectClone(__form()),
        };
        this.resetFields('formDialog');
      },
      async dialogOpen (type, more) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        await AutoPromise([
          async () => {
            await this.dialogRemoteKqmc('', more ? more.id : '');
          },
        ]);
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.formDialog = {
            ...this.formDialog,
            ...this.ObjectClone(__form(), more),
          };
          console.log(this.formDialog);
          let sx = this.formDialog.sx;
          if (sx === '') {
            this.formDialog.sx = '0';
          }
          console.log(typeof this.formDialog.sx);
          this.dialog.row = more;
          if (this.dialog.row.kwgd === 0) {
            this.formDialog.kwgd = 0;
          }
          break;
        }
        this.dialog.visible = true;
        setTimeout(() => {
          this.$refs.kumc.$el.children[0].focus();
        }, 100);
      },
      async dialogRemoteKqmc (query, id) {
        this.dialog.sskqid = await this.post('/wmslibraryposition/addSearchArea', {mc: query});
      },
      dialogSave () {
        if (this.dialog.title === '新增') {
          this.VALIDATE('formDialog', async option => {
            try {
              if (parseInt(this.formDialog.kyxs) < 0 || parseInt(this.formDialog.kyxs) > 1) {
                return this.$alert('库位可用系数 介于0和1之间', '提示');
              }
              if (option.hphf === '1') {
                option.pchf = '1';
              }
              let {data} = await this.post('/wmslibraryposition/add', option);
              option.id = data.id;
              if (this.formDialog.hphf === 1) {
                delete option.pchf;
              }
              let json = await this.get('/wmslibraryposition/getWmsLibraryPosition/' + option.id);
              this.table.data = [json, ...this.table.data];
              this.table.total++;
              this.resetFields('formDialog');
              this.dialogInit();
            } catch (err) {
              console.log(err);
            }
          });
        } else {
          this.VALIDATE('formDialog', async option => {
            try {
              option.id = this.dialog.row.id;
              if (option.hphf === '1') {
                option.pchf = '1';
              }
              await this.post('/wmslibraryposition/edit', option);
              this.tableWatch('table');
              this.dialogInit();
              this.dialog.visible = false;
            } catch (err) {
              console.log(err);
            }
          });
        }
      },
    },
    watch: {
      'formDialog.lx': function () {
        if (this.formDialog.lx === '4') {
          this.formDialog.hphf = '1';
          this.formDialog.pchf = '1';
        } else if (this.formDialog.lx === '5') {
          this.formDialog.hphf = '1';
          this.formDialog.pchf = '1';
        }
      },
    },
    mounted: async function () {
      this.tableWatch('table');
      if (!this.DICTIONARY_kuwei) {
        await this.USE('DICTIONARY_kuwei');
      }
    },
  });
</script>
<style scoped lang="scss">
  .box-card {
    margin: 20px;
  }

  .createTimeSpan {
    display: block;
    margin-top: 34px;
  }

  @media screen and (max-width: 800px) {
    .createTimeSpan {
      margin-top: 0;
    }
    .box-card {
      margin: 0;
    }
  }

  .el-select {
    width: 100%;
  }
</style>

<style lang="scss">
  .kuwei{
    width: 88vw;
    float: left;
  }
</style>
